<template>
	<view class="container">
		<view class="bg-white p-30 d-flex align-items-center justify-content-between mb-20">
			<view class="address">
				<view class="info" @tap="goToAddress">
					<view class="user-row">
						{{ `${defaultAddress.receiver}(${defaultAddress.sex==2 ? '女士' : '男士'}) ${defaultAddress.mobile}` }}
					</view>
					<view class="address-row">
						<view class="is-default" v-if="defaultAddress.isDefault==1">默认地址</view>
						<view class="address">{{ `${defaultAddress.detail} ${defaultAddress.extend}` }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white pt-30 mb-20">
			<view class="font-size-medium font-weight-bold mb-30 pl-30">商品列表</view>
			<list-cell arrow line-right>
				<view class="w-100 d-flex align-items-center overflow-hidden">
					<scroll-view class="flex-fill overflow-hidden" scroll-x>
						<view class="w-100 d-flex align-items-center">
							<image :src="item.imagUrl" class="pro-img" v-for="(item, index) in cartList" :key="index"></image>
						</view>
					</scroll-view>
					<view class="flex-shrink-0 ml-20">共{{ cartNum }}件</view>				
				</view>
			</list-cell>
			<list-cell arrow last>
				<view class="w-100 d-flex align-items-center justify-content-between">
					<view class="d-flex align-items-center">
						<view>积分兑换</view>
					</view>
					<view v-if="userInfo.points>0" class="text-color-assist">{{discount}}元</view>
					<view v-if="userInfo.points==0" class="text-color-assist">暂无可用</view>
				</view>
			</list-cell>
			<list-cell arrow last>
				<view class="w-100 d-flex align-items-center justify-content-between">
					<view class="d-flex align-items-center">
						<view>商品总金额</view>
					</view>
					<view  class="text-color-assist">{{cartAmount}}元</view>
				</view>
			</list-cell>
			<list-cell arrow last>
				<view class="w-100 d-flex align-items-center justify-content-between">
					<view class="d-flex align-items-center">
						<view>成交可获得积分</view>
					</view>
					<view  class="text-color-assist">{{getPoints}}个</view>
				</view>
			</list-cell>
			<list-cell arrow last>
				<view class="w-100 d-flex align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0">备注</view>
					<navigator hover-class="none" class="flex-fill ml-40 text-truncate text-right" open-type="navigate" url="/pages/pay/remark">{{ remark }}</navigator>
				</view>
			</list-cell>
			<list-cell last>
				<view class="w-100 d-flex justify-content-end align-items-center">
					<text class="font-size-sm">共{{ cartNum }}件商品，小计</text>
					<text class="font-size-lg font-weight-bold">￥{{ cartAmount }}</text>
				</view>
			</list-cell>
		</view>
		<list-cell last>
			<view class="w-100 d-flex align-items-center justify-content-between">
				<view>支付方式</view>
				<view class="d-flex align-items-center">
					<image src="/static/images/order/weixin-pay.png" class="wx-pay-icon"></image>
					<view>微信</view>
				</view>
			</view>
		</list-cell>
		<view class="footer">
			<button type="primary" @click="addOrder">提交订单</button>
		</view>
		<u-keyboard
			default=""
			ref="uKeyboard" 
			mode="number" 
			:mask="true" 
			:mask-close-able="false"
			:dot-enabled="false" 
			v-model="show"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{tempOrder.realPayAmount}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="cancelPay">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input 
						mode="box" 
						:maxlength="6"
						:dot-fill="true"
						v-model="password"
						:disabled-keyboard="true"
						@finish="finish"
					></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	<u-modal v-model="warnShow" show-confirm-button show-cancel-button @confirm="cancelAndSwitch" @cancel="warnShow=false" confirm-text="确认取消" cancel-text="否" :content="content" title="温馨提示"></u-modal>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
	import {mapState, mapMutations} from 'vuex'
	
	export default {
		components: {
			listCell
		},
		data() {
			return {
				show:false,
				password:'',
				tempOrder:{},
				warnShow:false,
				content:'是否放弃本次付款?'
			}
		},
		computed: {
			...mapState(['cart','defaultAddress','userInfo']),
			cartNum() {
				return this.cart.totalNumber
			},
			cartAmount() {
				return this.cart.totalPrice
			},
			remark() {
				return this.$store.state.remark
			},
			discount(){
				if(this.userInfo.points==0){
					return 0
				}
				return ((this.userInfo.points)/100)
			},
			cartList(){
				let that=this;
				let cartArr=[];
				if(!that.$u.test.isEmpty(this.cart.data)){
					let keys=Object.keys(this.cart.data);
					keys.forEach((item)=>{
						let data=this.cart.data[item];
						that.$set(data,'materials_text',data.specName);
						cartArr.push(data);
					})
					
				}
				return cartArr
			},
			getPoints(){
			return this.cartList.reduce((pre,cur)=>pre+(cur.point*cur.number),0)
			},
		},
		methods:{
			goToAddress(){
				uni.navigateTo({
					url:'/pages/addresses/addresses'
				})
			},
			cancelAndSwitch(){
				this.warnShow=false;
				this.showPop(false);
				uni.switchTab({
					url:'/pages/order/order'
				})
			},
			...mapMutations(['SET_CART','SET_ORDER','SET_USERINFO']),
			cancelPay(){
				this.warnShow=true;
			},
			onChange(val){
				if(this.password.length<6){
					this.password += val;
				}
				
				if(this.password.length>=6){
					this.pay();
				}
			},
			onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			pay(){
				uni.showLoading({
					title:'支付中'
				})
				let that=this;
				that.$u.api.orders.pay(that.tempOrder.id).then(res=>{
					uni.hideLoading();
					that.show = false;
					uni.showToast({
						icon:'success',
						title:'支付成功'
					})
					that.$nextTick(function(){
						that.$u.api.orders.get().then(result=>{
							that.SET_ORDER(result);
							let userInfo=that.userInfo;
							that.$set(userInfo,'points',res.points);
							that.SET_USERINFO(userInfo);
							uni.setStorageSync('userinfo',userInfo);
							uni.switchTab({
								url:'/pages/order/order'
							})
						})
					})
				})
			},
			//下单
			addOrder(){
				let that=this;
				let reqParam={
					totalPrice:that.cartAmount+"",
					userId:uni.getStorageSync('userinfo').uid,
					receiver:that.defaultAddress.receiver,
					receiverMobile:that.defaultAddress.mobile,
					receiverAddress:that.defaultAddress.detail,
					realPayment:(that.cartAmount-that.discount)+"",
					remark:that.remark,
					points:that.getPoints,
					items:[
						
					]
				};
				that.cartList.forEach(data=>{
					let item={
						itemId:data.itemId,
						itemImg:data.imagUrl,
						itemName:data.itemName,
						itemSpecId:data.specId,
						itemSpecName:data.specName,
						price:data.price+"",
						buyCounts:data.number
					};
					reqParam.items.push(item);
					
				});
				
				that.$u.api.orders.add(reqParam).then(res=>{
					that.tempOrder=res;
					that.getCart();
					that.showPop(true);
				})
			},
			showPop(flag = true){
				this.password = '';
				this.show = flag;
			},
			finish(){
				console.log(11111)
			},
			async getCart(){
				let that=this;
				let uid=uni.getStorageSync('userinfo').uid;
				that.$u.api.cart.get(uid).then(cart_res=>{
					let cartObj={};
					if(!that.$u.test.isEmpty(cart_res)){
						
						cartObj=cart_res;
					}
					that.SET_CART(cartObj)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}
	
	.pro-img {
		width: 120rpx;
		height: 90rpx;
		flex-shrink: 0;
	}
	
	.coupon-label {
		background-color: $color-primary;
		color: #FFFFFF;
		font-size: 18rpx;
		line-height: 0.9rem;
		width: 0.9rem;
		height: 0.9rem;
		margin-left: 10rpx;
		text-align: center;
	}
	
	.wx-pay-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.footer {
		background-color: #FFFFFF;
		z-index: 10;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		
		button {
			width: 250rpx;
			text-align: center;
			padding: 0;
			height: 100%;
			line-height: 100rpx;
			border-radius: 0 !important;
			font-size: $font-size-lg;
		}
	}
	.address {
		width: 100%;
		display: flex;
		align-items: center;
		
		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-right: 20rpx;
			overflow: hidden;
			
			.user-row {
				font-size: $font-size-lg;
				font-weight: 500;
				margin-bottom: 10rpx;
			}
			
			.address-row {
				display: flex;
				align-items: center;
				
				.is-default {
					background-color: #faf5ef;
					font-size: 16rpx;
					color: $color-primary;
					padding: 4rpx;
					flex-shrink: 0;
					margin-right: 6rpx;
				}
				
				.address {
					font-size: $font-size-base;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		}
</style>
